/**
* @description: 已办工单
* @author: 姚超
* @date:
**/
<template>
  <view class="main">
    <nav-bar class="header" back :title="title" @goBack="goBack" />
    <div class="task-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 列表循环   -->
        <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
          <view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
            <view class="task-top">
              <text class="equip-title">{{item.name}}</text>
            </view>
            <hr class="patrol-hr">
            <ul class="task-list-main">
              <li>
                <text class="task-title">计划执行时间：</text>
                <text class="task-titles">{{item.planStartTim&&item.planStartTim.split(' ')[0]}} - {{item.planEndTim&&item.planEndTim.split(' ')[0]}}</text>
              </li>
              <li style="display:flex;">
                <view style="flex:1;">
                  <text class="task-title">执行人员：</text>
                  <text class="task-titles">{{item.executerName}}</text>
                </view>
                <view>
                  <text class="task-title">执行时间：</text>
                  <text class="task-titles">{{item.executerTim}}</text>
                </view>
              </li>
            </ul>
          </view>
        </van-list>
      </van-pull-refresh>
    </div>
  </view>
</template>
<script>
import navBar from '../../components/common/nav-bar'

export default {
  name: 'completedTask',
  components: { navBar },
  props: {},
  data() {
    return {
      title: '已办工单',
      page: 1, // 当前数据页数
      pageSize: 20, // 默认每页20条
      total: 0, // 总条数
      taskList: [],
      refreshing: false,
      isLoading: false,
      finished: false
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getTaskList()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    getTaskList() {
      this.$api
        .getList({
          state: '99',
          limit: this.pageSize,
          page: this.page
        })
        .then(res => {
          this.taskList = res.data.list
          this.total = res.data.total
        })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getTaskList();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1
        this.getTaskList()
      } else {
        this.finished = true
      }
    },
    jump(item) {
      // 跳转计划工单详情
      uni.navigateTo({
        url: `/pages/testProject/taskCompletionDetails?OBJ_ID=${item.objId}`
      })
    }
  }
}
</script>
<style scoped lang="scss">
.main {
  width: 100vw;
  height: 100vh;
  background: #f2f6fa;
  overflow: hidden;
}
.task-main {
  height: calc(100vh - #{px2vh(260)} - 38px);
  overflow: auto;
  position: relative;
  .task-list {
    width: px2vw(1020);
    height: px2vh(300);
    background: #fff;
    border-radius: px2vw(20) px2vh(20);
    margin-top: px2vh(30);
    margin-left: px2vw(30);
    margin-bottom: px2vh(30);
    .task-top {
      width: calc(100% - #{px2vw(80)});
      margin-left: px2vw(40);
      height: px2vh(100);
      img {
        width: px2vw(64);
        height: px2vw(64);
        margin-top: px2vh(40);
        float: left;
      }
      .equip-title {
        color: #333;
        font-size: px2vw(48);
        width: px2vw(860);
        height: px2vh(100);
        line-height: px2vh(100);
        float: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: px2vw(10);
      }
      .equip-state-wc,
      .equip-state-wzx,
      .equip-state-zxz {
        width: px2vw(223);
        height: px2vh(50);
        font-size: px2vw(32);
        border-radius: px2vw(10);
        margin-top: px2vh(48);
        margin-left: px2vw(27);
        float: left;
        text-align: center;
      }
      .equip-state-wc {
        background: rgba(62, 218, 104, 0.1);
      }
      .equip-state-wzx {
        background: rgba(255, 112, 112, 0.1);
      }
      .equip-state-zxz {
        background: rgba(255, 180, 0, 0.1);
      }
    }
    .patrol-hr {
      width: px2vw(940);
      border: px2vh(1) solid #e5e5e5;
      margin-left: px2vw(40);
    }
  }
  .task-list-main {
    width: px2vw(940);
    height: px2vh(266);
    margin-left: px2vw(40);
    li {
      margin-top: px2vh(30);
      height: px2vh(36);
      font-size: px2vw(36);
      .task-title {
        color: #666;
      }
      .task-titles {
        color: #333;
      }
    }
  }
  .task-hr {
    width: px2vw(940);
    border: 0;
    border-bottom: px2vh(6) dashed #e5e5e5;
    margin-top: px2vh(14);
    margin-left: px2vw(40);
  }
  .by {
    position: absolute;
    width: px2vw(40);
    height: px2vh(40);
    border-radius: px2vw(100);
    left: px2vw(12);
    float: left;
    background: #f2f6fa;
  }
  .byr {
    position: absolute;
    width: px2vw(40);
    height: px2vh(40);
    border-radius: px2vw(100);
    right: px2vw(12);
    float: right;
    background: #f2f6fa;
  }
  .bottom-patrol {
    width: px2vw(940);
    height: px2vh(54);
    margin-left: px2vw(40);
    margin-top: px2vh(26);
    font-size: px2vw(32);
    .left-bottom-patrol {
      min-width: px2vw(260);
      padding: 0 4px;
      height: px2vh(54);
      line-height: px2vh(54);
      background: #ecf1fb;
      float: left;
      text-align: center;
      color: #417adc;
      border-radius: px2vw(8);
    }
    .right-bottom-patrol {
      width: px2vw(120);
      height: px2vh(54);
      float: right;
      .patrol-btn {
        width: px2vw(120);
        height: px2vh(54);
        background: #417adc;
        float: right;
        //border-radius: px2vw(20);
      }
      /deep/.van-button--normal {
        padding: 0;
      }
    }
  }
}
</style>